{% extends "../base.html" %}
{%block title %}专题列表{%endblock%}
{%block parent_title %}专题{%endblock%}
{%block parent_url%}/subject{%endblock%}
{%block content %}
<div class="row">
    {% for subject in list.data %} 
    <div class="col-lg-6">
        <div class="card card-outline subject-item">
            <div class="card-header">
                <h3 class="card-title"> {{ subject.name }}</h3>
            </div>
            <div class="card-body"> {{ subject.summary }}</div>
            <div class="card-footer text-right">
                <a href="/subject/{{ subject.slug }}" class="card-link">开始阅读</a>
            </div>
        </div><!-- /.card -->
    </div><!--.col-->
    {% endfor %}
</div><!--row-->
{% if list.total_pages > 1 %}
<div class="clearfix">
    <ul class="pagination pagination-sm mb-3 float-right">
        <li class="page-item"><a class="page-link" href="/subject">«</a></li>
        {% for i in 0..list.total_pages %}
        <li class="page-item"><a class="page-link" href="/subject?page={{ i }}">{{i+1}}</a></li>
        {% endfor %}
        <li class="page-item"><a class="page-link" href="/subject?page={{ list.total_pages -1 }}">»</a></li>
    </ul>
</div>
{%endif%}
{%endblock%}
{%block js%}
<script>
    $(function(){
            const cls = ['primary', 'success', 'warning', 'danger'];
            const clsLen = cls.length;
            $('.subject-item').each(function(idx, ele) {
                    const clsName = `card-${cls[idx%clsLen]}`;
                    $(ele).addClass(clsName);
                });
        });
</script>
{%endblock%}
